import React, { memo } from 'react'
import {
  ToplistDetailWrapper,
  DetailBarWrapper,
  SonglistWrapper
} from './style'
import DetailNav from '../detail-nav'
import { shallowEqual, useSelector } from 'react-redux'
import {
  formatImg,
  formatDuration
} from '@/utils/format'
import usePlayMusic from '@/hooks/usePlayMusic'
import useShowDetail from '@/hooks/useShowDetail'
export default memo(function ToplistDetail() {
  const { currentToplistDetail } = useSelector(state => ({
    currentToplistDetail:state.getIn(['toplist','currentToplistDetail'])
  }), shallowEqual)
  const playMusic = usePlayMusic()
  const goToSongDetail = useShowDetail()
  const tracks = currentToplistDetail.tracks || []

  return (
    <ToplistDetailWrapper>
      <DetailNav />
      <DetailBarWrapper>
        <div className='title'>歌曲列表</div>
        <div className='count'>{currentToplistDetail.trackCount}首歌</div>
        <div className='play'><span>播放：</span><span className='playcount'>{currentToplistDetail.playCount}</span>次</div>
      </DetailBarWrapper>
      <SonglistWrapper>
        <table>
          <thead>
            <tr className="header">
              <th className="ranking"></th>
              <th className="title">标题</th>
              <th className="duration">时长</th>
              <th className="singer">歌手</th>
            </tr>
          </thead>
          <tbody>
            {
              tracks.map((item, index) => {
                return (
                  <tr key={item.id}>
                    <td>
                      <div className="rank-num">
                        <span className="num">{index + 1}</span>
                        <span className="new sprite_icon2"></span>
                      </div>
                    </td>
                    <td>
                      <div className="song-name">
                        {
                          index < 3 ?
                            (<img src={formatImg(item.al.picUrl, 50)} alt="" onClick={e => goToSongDetail(item.id)}/>) : null
                        }
                        <span className="play sprite_table" onClick={e => playMusic(item.id)}></span>
                        <span className="name" onClick={e => goToSongDetail(item.id)} href=''>{item.name}</span>
                      </div>
                    </td>
                    <td>{formatDuration(item.dt)}</td>
                    <td>{item.ar[0].name}</td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </SonglistWrapper>
    </ToplistDetailWrapper>
  )
})
